<template>
    <div class="layout-padding">
        <el-tabs
			v-model="activeName"
			type="border-card"
			class="card-tabs h-full"
			@tab-click="handleClick"
			style="height: 100%; width: 100%; display: flex; flex-direction: column"
		>
            <el-tab-pane :label="$t('productlineUser.UserBinding')" name="first" class="h-full">
                <splitpanes>
                <pane size="17">
                    <div class="layout-padding-auto layout-padding-view layout-container">
                        <custom-tree highlight-current :data="data" :props="defaultProps" @node-click="handleNodeClick" />
                    </div>
                </pane>
                <pane size="83">
                    <div class="layout-padding-auto layout-padding-view">
                        <!--查询表单-->
                        <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
                            <el-form-item>
                                <el-button type="primary"  icon="plus"  @click="onOpenAddMenu">{{ $t('message.add')
                                    }}</el-button>
                            </el-form-item>
                            <el-form-item :label="$t('message.userNo')" prop="workNumber">
                                <el-input v-model="state.queryForm.workNumber" clearable
                                    :placeholder="$t('message.userNo')" />
                            </el-form-item>
                            <el-form-item :label="$t('message.userName')" prop="name">
                                <el-input v-model="state.queryForm.name" clearable
                                    :placeholder="$t('message.userName')" />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" icon="search" @click="search">{{
                                    $t('basMaterial.query') }}</el-button>
                                <el-button icon="refresh" plain  @click="resetQuery">{{ $t('basMaterial.reset')
                                    }}</el-button>
                            </el-form-item>
                        </el-form>
                        <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
                            stripe style="width: 100%;height:100%" :header-cell-style="tableStyle.headerCellStyle"
                            @sort-change="sortChangeHandle">
                            <el-table-column type="index" label="#" width="50" />
                            <el-table-column prop="productionlineCode" :label="$t('productlineUser.ProductionLineCode')" />
                            <el-table-column prop="productionlineName" :label="$t('productlineUser.ProductionLineName')" />
                            <el-table-column prop="shiftName" :label="$t('productlineUser.ShiftName')" />
                            <el-table-column prop="workNumber" :label="$t('message.userNo')" />
                            <el-table-column prop="name" :label="$t('message.userName')" />
                            <el-table-column prop="deptartment" :label="$t('productlineUser.deptartment')" />
                            <el-table-column prop="isOutStr" :label="$t('productlineUser.isOut')" />
                            <el-table-column :label="$t('common.action')" show-overflow-tooltip width="250">
                                <template #default="scope">
                                    <span style="margin-left: 12px">
                                        <el-button type="danger" icon="delete" @click="handleDelete(scope.row)">
                                        </el-button>
                                    </span>
                                </template>
                            </el-table-column>
                        </el-table>
                        <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                            v-bind="state.pagination" />
                    </div>
                    <MenuDialog @refresh="getDataList" ref="menuDialogRef" />
                </pane>
            </splitpanes>
            </el-tab-pane>
            <el-tab-pane :label="$t('productlineUser.UserEnter')" name="second" class="h-full">
				<User />
			</el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import { BasicTableProps, useTable } from "/@/hooks/table";
import { GetProcessAndProductLine,GetProductionlineUserList,DeleteProductionLineUser } from '/@/api/platform/mes/productlineUser';
import { useMessage, useMessageBox } from "/@/hooks/message";
import { useI18n } from 'vue-i18n';
// 引入组件
const MenuDialog = defineAsyncComponent(() => import('./form.vue'));
import { TabsPaneContext } from 'element-plus';
const { t } = useI18n();

// 引入组件
const User = defineAsyncComponent(() => import('././user/index.vue'));
import customTree from '/@/components/CustomTree/index.vue';
const activeName = ref('first');
const processAndProductions = ref();
// 初始化数据
onMounted(() => {
	GetProcessAndProductLine().then((res) => {
		processAndProductions.value = res.data;
  });
});


interface Tree {
    label: string
    children?: Tree[]
}

const handleNodeClick = (data: Tree) => {
    state.queryForm.ProductionLineCode = data.value;
    state.queryForm.ProductionLineName = data.label;
    getDataList()
}


const data: Tree[] = processAndProductions;
const handleClick = (tab: TabsPaneContext, event: Event) => {
	console.log(tab, event);
};

const defaultProps = {
    children: 'children',
    label: 'label',
}


// 搜索变量
const queryRef = ref()

const search =()=>{
    state.queryForm.ProductionLineCode = '';
    state.queryForm.ProductionLineName = '';
    getDataList();
 
}
const state: BasicTableProps = reactive<BasicTableProps>({
    queryForm: {},
    pageList: GetProductionlineUserList
})


//  table hook
const {
    getDataList,
    currentChangeHandle,
    sizeChangeHandle,
    sortChangeHandle,
    downBlobFile,
    tableStyle
} = useTable(state)


// 清空搜索条件
const resetQuery = () => {
    // 清空搜索条件
    queryRef.value?.resetFields()
    getDataList(false)

}
// 删除操作
const handleDelete = async (row: any) => {
    try {
        await useMessageBox().confirm(t('common.delConfirmText'));
    } catch {
        return;
    }

    try {
        await DeleteProductionLineUser({ id: row.id });
        getDataList();
        useMessage().success(t('common.delSuccessText'));
    } catch (err: any) {
        useMessage().error(err.msg);
    }
};
const menuDialogRef = ref();
// 打开新增菜单弹窗
const onOpenAddMenu = () => {
    ///if (state.queryForm.ProductionLineCode == null || state.queryForm.ProductionLineCode == "" || state.queryForm.ProductionLineCode == "undefined") {
        //useMessage().warning(t("productlineUser.selectProductLineFirst"));
        //return;
    //}
    menuDialogRef.value.openDialog(state.queryForm.ProductionLineCode,state.queryForm.ProductionLineName);
    //menuDialogRef.value.openDialog();
};
</script>
<style>
.layout-container{
    overflow: auto !important;
}
</style>